<template>
  <div class="djtype">
    <div class="title">
      <p>{{ name }}</p>
      <span @click="toDjTypeList(type)">更多></span>
    </div>
    <div class="list">
      <div class="li" v-for="(item, index) in datalist" :key="index" @click="toDjDetail(item.id)">
        <div class="img">
          <img :src="item.picUrl" />
          <span class="name">{{ item.name }}</span>
        </div>
        <span class="rcmdtext">{{ item.rcmdtext }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getTypeRecommend } from '../../../network/dj.js'
export default {
  props: ['type', 'name'],
  data () {
    return {
      datalist: []
    }
  },
  methods: {
    toDjTypeList (type) {
      this.$router.push('/category_radio/' + type)
    },
    toDjDetail (id) {
      this.$router.push('/program_detail/' + id)
    },
    getTypeRecommend (type) {
      getTypeRecommend(type).then(res => {
        // console.log(res.data)
        this.datalist = res.data.djRadios.slice(0, 6)
        // console.log(this.datalist)
      })
    }
  },
  created () {
    // console.log(this.type)
    // this.getTypeRecommend(this.type)
  },
  watch: {
    type () {
      this.getTypeRecommend(this.type)
    }
  }
}
</script>

<style lang="less" scoped>
  .djtype {
    width: 95%;
    margin: 30px auto;
    box-sizing: border-box;
    .title {
      padding-bottom: 10px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-bottom: 1px solid #e1e1e2;
      p {
        font-size: 20px;
      }
      span {
        cursor: pointer;
      }
    }
    .list {
      width: 100%;
      margin: 15px 0;
      display: flex;
      justify-content: space-between;
      .li {
        width: 15%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .img {
          position: relative;
          width: 100%;
          img {
            width: 100%;
          }
          .name {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            position: absolute;
            bottom: 5px;
            left: 0;
            font-size: 15px;
            color: #fff;
            text-align: left;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.7));
          }
        }
        .rcmdtext {
          width: 100%;
          font-size: 15px;
          text-align: left;
          // display: flex;
          // justify-content: flex-start;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
